<template>
  <div class="deliverySetting">
    <div class="masonry">
      <div v-for="url in imgs" :key="url" class="item">
        <div>
          <el-image :src="require('./../../assets/gallery/' + url)" lazy/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Images',
  data() {
    return {
      imgs: ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png', '10.png', '11.png', '12.png', '13.png', '14.png', '15.png', '16.png', '17.png', '18.png', '19.png', '20.png', '21.png', '22.png', '23.png', '24.png', '25.png']
    }
  },
  methods: {
    // 123
  }
}
</script>

<style scoped lang="scss">
.deliverySetting {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.masonry {
  -moz-column-count: 3; /* Firefox */
  -webkit-column-count: 3; /* Safari 和 Chrome */
  column-count: 3;
  -moz-column-gap: 2px;
  -webkit-column-gap: 2px;
  column-gap: 2px;
  width: 80%;
  margin: 20px auto;
}
.item {
  padding: 20px;
  margin-bottom: 2px;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
</style>
